<template>
  <van-popup
    v-model="popupShow"
    closeable
    lock-scroll
    safe-area-inset-bottom
    @closed="handleClosed"
    style="width: 100%; height: 100%"
  >
    <div class="video-plugins" @mouseover="overControls" @mouseout="outControls">
      <live-player :video-url="videoUrl" :controls="true" :live="true" :muted="true"></live-player>
      <!-- <span :class="{'closeVideo': (videoUrl!== '' || videoUrl) ? true : false}" @click="closeVideo(videoUrl)"></span> -->
      <span v-if="videoUrl" :class="{ closeVideo: isdisable }" @click="closeVideo(videoUrl)"></span>
    </div>
  </van-popup>
</template>

<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
  name: 'VideoPlugins',
  props: {
    disable: {
      type: Boolean,
      default: false
    },
    videoUrl: {
      // 地址
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isdisable: this.disable,
      popupShow: false
    }
  },
  components: {
    LivePlayer
  },
  methods: {
    overControls() {
      this.isdisable = true
      // this.$emit('overControls')
    },
    outControls() {
      this.isdisable = false
      // this.$emit('outControls')
    },
    closeVideo() {
      this.$emit('closeVideo')
    },
    // 视频右键
    onContextmenu(event) {
      const that = this
      that.$contextmenu({
        items: [
          {
            label: '关闭窗口',
            onClick: function closeCurrent() {
              that.$emit('closeCurrent')
            }
          },
          {
            label: '关闭所有窗口',
            onClick: function closeAll() {
              // console.log('关闭所有窗口')
              that.$emit('closeAll')
            },
            divided: true
          },
          {
            label: '码流切换',
            minWidth: 0,
            children: [
              {
                label: '主码流',
                onClick: function mainCodeStream() {
                  // alert('主码流切换')
                  that.$emit('mainCodeStream')
                }
              },
              {
                label: '辅码流',
                onClick: function auxiliaryCodeStream() {
                  // alert('辅码流切换')
                  that.$emit('auxiliaryCodeStream')
                }
              }
            ]
          }
        ],
        event,
        customClass: 'class-a',
        zIndex: 3,
        minWidth: 230
      })
      return false
    },
    handleClosed() {
      this.popupShow = false
      this.$emit('update:show', false)
    }
  }
}
</script>

<style scoped lang="less">
.van-popup {
  background: transparent !important;
}
.van-popup.van-popup--center.van-popup--safe-area-inset-bottom {
  height: 100% !important;
}
.video-plugins {
  height: 100%;
}
.player-wrapper {
  height: 100%;
}
/deep/.video-wrapper {
  height: 100%;
  overflow: auto !important;
  padding-bottom: 0 !important;
}
/deep/.video-js .vjs-tech {
  width: auto !important;
}
/deep/.video-js {
  background: transparent;
  height: 100%;
}
</style>
